@import "@/assets/css/element-variables.scss";
/*通用白色面板*/
.common-panel {
  box-sizing: border-box;
  border: 1px solid rgba(232, 232, 232, 1);
  background-color: #fff;
  box-shadow: 1px 1px 1px rgba(204, 204, 204, 0.349019607843137);
}
/*通用折叠tabs*/
.common-collapse-tab {
  .turn {
    transform: rotate(-90deg);
  }
  /deep/ .el-tabs__item {
    position: static;
    height: 67px;
    text-align: center;
    line-height: 67px;
    .arrow {
      display: none;
      position: absolute;
      z-index: 100;
      right: 20px;
      top: 50%;
      margin-top: -7px;
      transition: transform 0.3s, -webkit-transform 0.3s;
    }
  }
  /deep/ .el-tabs__item.is-focus.is-active {
    box-shadow: none !important;
  }
  /deep/ .el-tabs__nav {
    position: static;
    float: none;
    .is-active {
      .arrow {
        display: inline-block;
      }
    }
  }
  /deep/ .el-tabs__nav-scroll {
    box-sizing: border-box;
    padding-left: 20px;
  }
  /deep/ .el-tabs__nav-wrap::after {
    height: 1px;
  }
  /deep/ .el-tabs__header {
    margin: 0px;
  }
  /deep/ .el-tab-pane {
    box-sizing: border-box;
    padding: 0px;
    overflow: hidden;
  }
}
/*通用底部固定按钮区域*/
.common-bottom-fixed-area {
  height: 60px;
  width: calc(100% - 220px);
  position: fixed;
  bottom: 0px;
  left: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
  box-shadow: 2px 0px 4px rgba(0, 0, 0, 0.2);
  z-index: 10;
  .orange {
    background-color: rgba(255, 153, 0, 1);
    border: 1px solid rgba(255, 153, 0, 1);
  }
}

/* 表格 */
.el-table thead{ height: 50px; color:#606266 !important;}
.el-table thead th{ background: #f2f2f2; }

/* 弹窗- */
.el-dialog__header{
  padding-top: 15px !important;
  padding-bottom: 15px !important;
  border-bottom: 1px solid #ebebeb;
}
/* 表单输入框长度控制 */
.el-dialog__body{
  .el-autocomplete, 
  .el-select,
  .el-input,
  .el-cascader{display: block !important; width: 100% !important;}
  .el-date-editor{width: 100% !important;}
} 

/* 级联选择器，样式实现，点击文字选择任意一级选项 */
.el-cascader-panel .el-radio{ width: 100%; height: 100%; z-index: 10; position: absolute; top: 0; right: 0; } 
.el-cascader-panel .el-radio__input{ visibility: hidden; } 
.el-cascader-panel .el-cascader-node__postfix{ top: 10px; }

/* 气泡弹窗样式 */
.el-popconfirm__main{ margin: 5px 0 8px;}

/* 按钮里面的iconfont */
.el-button .iconfont{ font-size: 14px; }

/* 图片 */
.el-image .image-slot{ position: relative; width: 100%; height: 100%;  }
.el-image .image-slot img{ max-width: 100%; max-height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}

/* 房间通用样式 */
.room{
  position: relative;
  overflow: hidden;
  margin-bottom: 20px;
  border: 1px solid rgb(227, 230, 248);
  border-radius: 8px;
  box-shadow: 0 2px 16px rgba(39,103,241, .3);
  box-sizing: border-box;
  cursor: pointer;
  &.room3{ cursor: not-allowed;}
  .name{
    padding: 15px;
    line-height: 28px;
    font-size: 30px;
    color: $--color-primary;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background-color: $--color-primary-light-8;
  }
  .mesBox{
    padding: 15px;
    .avatar{
      height: 77px;
    }
    .mes{
      margin-left: 15px;
      width: calc(100% - 95px);
      .p2{
        white-space: nowrap;
        .el-tag{ 
          margin-right: 10px;
          background: $--color-primary-light-9;
          border:none;
          font-size: 16px;
          padding: 0 6px;
          border-radius: 0;
          color: #4F57A5;
        }
      }
      .p3{
        margin-top: 20px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
  .status{
    position: absolute;
    top: 0;
    right: 0;
  }
  .statusSpan{
    position: absolute;
    top: -15px;
    right: -45px;
    padding: 10px;
    width: 100px;
    height: 40px;
    line-height: 60px;
    text-align: center;
    font-size: 14px;
    color: #fff;
    transform: rotate(45deg);
    user-select: none;
    &.status0{ background: $--color-success; }
    &.status1{ background: $--color-primary; }
    &.status2{ background: $--color-warning; }
    &.status3{ background: $--color-info; }
  }
  &:hover{
    box-shadow: 1px 4px 20px rgba(39,103,241, .5);
  }
}
@media screen and (max-width: 1440px) {
  .room{
    .name{
      padding: 10px;
      line-height: 28px;
      font-size: 28px;
    }
    .mesBox{
      padding: 10px;
      .avatar{
        height: 70px;
      }
      .mes{
        margin-left: 8px;
        width: calc(100% - 90px);
        .p2{
          .el-tag{ 
            margin-right: 6px;
          }
        }
        .p3{
          margin-top: 15px;
        }
      }
    }
  }
}
